<template>
  <view class="collapse-content">
    <view class="row-content">
      <view>值班人员：</view>
      <view>{{ data.dutyUserLabel | empty }}</view>
    </view>
    <view class="row-content">
      <view>接班值班人员：</view>
      <view>{{ data.dutyNextUserLabel | empty }}</view>
    </view>
    <view class="row-content">
      <view>汇报人：</view>
      <view>{{ data.reportUserLabel | empty }}</view>
    </view>
    <view class="row-content">
      <view>汇报时间：</view>
      <view>{{ meetingTime(data.reportTime) | empty }}</view>
    </view>

    <view class="footer"> 祝各位领导工作愉快！ </view>
  </view>
</template>
<script>
import dayjs from 'dayjs'
export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    meetingTime() {
      return function (time) {
        return time ? dayjs(time).format('YYYY/MM/DD HH:mm') : time
      }
    },
  },
  filters: {
    empty(val) {
      return val || '--'
    },
  },
}
</script>
<style lang="scss" scoped>
.collapse-content {
  background: #fff;
  width: 100%;
  box-sizing: border-box;

  .row-content {
    padding: 24rpx 30rpx 24rpx 0;
    margin-left: 30rpx;
    width: 100%;
    display: flex;
    align-items: flex-start;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-bottom: 1rpx solid #d5d7e3;

    & view:first-child {
      text-align: right;
    }

    & view:last-child {
      flex: 1;
      word-break: break-all;
      color: #666666;
    }
  }

  & > view:last-child {
    border: 0;
  }

  .column-content {
    flex-direction: column;
    padding: 24rpx 30rpx 24rpx 0;
    margin-left: 30rpx;
    width: 100%;
    display: flex;
    align-items: flex-start;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-bottom: 1rpx solid #d5d7e3;

    & view:first-child {
      text-align: right;
      margin-bottom: 20rpx;
    }

    & view:last-child {
      flex: 1;
      word-break: break-all;
      color: #666666;
    }
  }
}

.flex-column {
  flex-direction: column;

  & view:first-child {
    width: 100%;
    text-align: left !important;
    margin-bottom: 20rpx;
  }
}

.footer {
  height: 37rpx;
  font-size: 26rpx;
  color: #999999;
  line-height: 20rpx;
  padding: 48rpx 0;
  text-align: center;
  background: #f5f5f5;
}
</style>
